<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ECharts图</title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
</head>

<body>
    <div id="main-vip" style="width:100%;height:50vh;border-bottom:1px solid black ;"></div>
    <div id="mian-income" style="width:100%;height: calc(100vh - 50vh);"></div>
    <script type="text/javascript">
        var mychart_vip = echarts.init(document.getElementById("main-vip"))
        var open = {
            title: {
                text: '用户VIP状态分布图',
                x: 'center',
                y: 'top',
                textStyle: {
                    fontSize: 25,
                    fontWeight: 'bolder',
                    color: '#000080'
                }
            },
            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'vertical',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 200,
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'center',
                itemWidth: 40,   // 设置图例图形的宽
                itemHeight: 30,  // 设置图例图形的高
                textStyle: {
                    color: '#666'  // 图例文字颜色
                },
                // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 20,
                // backgroundColor: '#eee',  // 设置整个图例区域背景颜色
                data: ${name}
            },
            series: [
                {
                    name: 'VIP人员比例饼图',
                    type: 'pie',
                    radius: ['70%', '30%'],
                    center: ['70%', '50%'],
                    data: ${vipNum},
                    labelLine: {
                        normal: {
                            show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                        }
                    },
                    label: {
                        normal: {
                            position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                            // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                            // {a}指series.name  {b}指series.data的name
                            // {c}指series.data的value  {d}%指这一部分占总数的百分比
                            formatter: '{c}'
                        }
                    }
                }
            ]
        }
        mychart_vip.setOption(open)


        let month_arr = ${monthPrice};
        let month_date = [];
        let price_date = [];
        for (let i = 0;i<month_arr.length;i++){
            month_date.push(month_arr[i].buyMonth);
            price_date.push(month_arr[i].monthPrice);
        }
        var mychart_income = echarts.init(document.getElementById("mian-income"));
        var open = {
            title: {
                text: '近六个月收入',
                x: 'center',
                y: 'top',
                textStyle: {
                    fontSize: 25,
                    fontWeight: 'bolder',
                    color: '#000080'
                }
            },
            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'right',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                // data:
            },
            grid: {
                top: '20%',   // 等价于 y: '16%'
                left: '5%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },


            xAxis: {
                name: '月份',
                type: 'category',
                axisLabel: {
                    rotate: 30, // 旋转角度
                    interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                boundaryGap: true,
                data: month_date
            },
            yAxis: {
                name: '收入',
                type: 'value',
                min: 0
            },
            series: [
                {
                    name: '总收入',
                    type: 'line',
                    stack: '总量',
                    data: price_date,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red',  // 拐点边框颜色
                            lineStyle: {
                                width: 5,  // 设置线宽
                                // type:'dotted'  //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                }
            ]

        };
        mychart_income.setOption(open)

    </script>
</body>

</html>